<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

<ui:composition template="../templates/hub.xhtml">
	<ui:define name="titre">#{lbl['destination.title']}</ui:define>
	<ui:define name="hub_page">

		<!-- Inclusion du bloc de navigation simple. -->
		<ui:include src="../blocs/inc_navigation_empty.xhtml" />

		<!-- La liste des destinations. -->
		<h:form id="destinations_form">
			<h:panelGrid id="destinations_panel_container" width="100%">

				<!-- Le panneau des messages (pour info uniquement). -->
				<rich:messages rendered="#{destinationManaged.displayMessage}" />

				<rich:dataTable value="#{destinationManaged.lstDestinations}"
					var="destination" style="width:100%"
					rowClasses="rich_datagrid_even_line, rich_datagrid_odd_line"
					iterationStatusVar="it" id="destinations_table" styleClass="stable"
					rows="15">

					<f:facet name="noData">
						<h:outputText value="#{msg['msg.info.nodata']}" />
					</f:facet>

					<rich:column style="width:5%;text-align:center">
						<f:facet name="header">
							<h:outputText value="#{lbl['destination.station.code']}" />
						</f:facet>
						<h:outputText value="#{destination.extId}" />
					</rich:column>

					<rich:column style="width:6%;text-align:center">
						<f:facet name="header">
							<h:outputText value="#{lbl['destination.creation.date']}" />
						</f:facet>
						<h:outputText value="#{destination.creationDate}">
							<f:convertDateTime pattern="dd/MM/yyyy" timeZone="Europe/Paris" />
						</h:outputText>
					</rich:column>

					<rich:column style="width:10%">
						<f:facet name="header">
							<h:outputText value="#{lbl['destination.label']}" />
						</f:facet>
						<h:outputText value="#{destination.label}" />
					</rich:column>

					<rich:column
						style="width:4%;background-color:#{destination.hexColor}">
						<f:facet name="header">
							<h:outputText value="#{lbl['destination.color']}" />
						</f:facet>
					</rich:column>

					<rich:column>
						<f:facet name="header">
							<h:outputText value="#{lbl['destination.listextid']}" />
						</f:facet>
						<h:outputText value="#{destination.lstExtId}">
							<f:converter converterId="listDestinationConverter" />
						</h:outputText>
					</rich:column>

					<rich:column style="width:40%;">
						<f:facet name="header">
							<h:outputText value="#{lbl['common.comment']}" />
						</f:facet>
						<h:outputText value="#{destination.comment}" />
					</rich:column>

					<rich:column style="width:4%; text-align:center">
						<f:facet name="header">
							<h:outputText value="#{lbl['common.update']}" />
						</f:facet>
						<a4j:commandLink execute="@this" render="edit_panel"
							oncomplete="#{rich:component('edit_popup')}.show()">
							<h:graphicImage value="../../imgs/icons/ico_update.png"
								width="20" />
							<a4j:param value="#{it.index}"
								assignTo="#{destinationManaged.currentDestinationIndex}" />
							<a4j:param value="update"
								assignTo="#{destinationManaged.typeAction}" />
							<f:setPropertyActionListener
								target="#{destinationManaged.currentDestination}"
								value="#{destination}" />
						</a4j:commandLink>
					</rich:column>

					<rich:column style="width:4%; text-align:center">
						<f:facet name="header">
							<h:outputText value="#{lbl['common.delete']}" />
						</f:facet>
						<a4j:commandLink execute="@this" render="del_panel"
							oncomplete="#{rich:component('confirm_del_popup')}.show()">
							<h:graphicImage value="../../imgs/icons/ico_delete.png"
								width="20" />
							<a4j:param value="#{it.index}"
								assignTo="#{destinationManaged.currentDestinationIndex}" />
							<a4j:param value="del"
								assignTo="#{destinationManaged.typeAction}" />
							<f:setPropertyActionListener
								target="#{destinationManaged.currentDestination}"
								value="#{destination}" />
						</a4j:commandLink>
					</rich:column>

					<f:facet name="footer">
						<rich:dataScroller page="#{destinationManaged.page}" />
					</f:facet>
				</rich:dataTable>
			</h:panelGrid>

			<!-- Pilotage des lignes tableau. -->
			<ui:include src="../blocs/inc_selector.xhtml" />

			<!-- Ajout destination. -->
			<div id="create_destination_div" align="right">
				<h:panelGrid columns="2">
					<h:outputText value="#{lbl['destination.create']}" />
					<a4j:commandLink execute="@this" render="edit_panel"
						oncomplete="#{rich:component('edit_popup')}.show()">
						<h:graphicImage value="../../imgs/icons/ico_create.png" />
						<a4j:param value="create"
							assignTo="#{destinationManaged.typeAction}" />
					</a4j:commandLink>
				</h:panelGrid>
			</div>

			<!-- Popup pour la suppression destination. -->
			<rich:popupPanel id="confirm_del_popup"
				headerClass="rich_panel_popup_head"
				header="#{lbl['destination.confirm']}" autosized="true">
				
				<rich:messages/>
				
				<h:panelGrid styleClass="panel" width="300" height="100"
					id="del_panel">
					<h:panelGroup>
						<h:outputText value="#{msg['msg.confirm.destination.delete']}" /> : 
						<h:outputText
							value="#{destinationManaged.currentDestination.label}" /> ?
					</h:panelGroup>
					<h:panelGrid columns="2" columnClasses="_left, _right" width="100%"
						style="margin-top:20px">
						<a4j:commandButton id="destination_b_cancel_delete"
							value="#{lbl['common.button.cancel']}"
							onclick="#{rich:component('confirm_del_popup')}.hide(); return false;" />

						<a4j:commandButton id="destination_b_delete"
							action="#{destinationManaged.delete}"
							render="destinations_panel_container" execute="@this"
							value="#{lbl['common.button.delete']}"
							oncomplete="if ('#{destinationManaged.maximumSeverity}'=='INFO'){#{rich:component('confirm_del_popup')}.hide();}" />
					</h:panelGrid>
				</h:panelGrid>
			</rich:popupPanel>

			<!-- Popup pour l'edition la destination. -->
			<rich:popupPanel header="#{lbl['destination.edit']}" id="edit_popup"
				domElementAttachment="parent" autosized="true"
				headerClass="rich_panel_popup_head"
				onbeforeshow="centerPopup(485,300,'destinations_form:edit_popup');"
				onshow="makeFocusOnField('destinations_form:extId');">

				<rich:messages ajaxRendered="true" layout="list" />

				<h:panelGrid columns="2" id="edit_panel"
					columnClasses="_left_top, _left" width="485">
					<h:panelGroup>
						<h:outputText value="#{lbl['destination.station.code']}" /> : 
						</h:panelGroup>

					<h:inputText id="extId" tabindex="1"
						value="#{destinationManaged.currentDestination.extId}"
						maxlength="6" size="30" required="true"
						validator="#{destinationManaged.destinationUniqueValidator}"
						requiredMessage="#{err['destination.code.station.required']}">
						<f:validator validatorId="stringNumberValidator" />
						<f:validator validatorId="lengthValidator" />
						<f:attribute name="minLength" value="5" />
						<f:attribute name="fieldName"
							value="#{lbl['destination.station.code']}" />
					</h:inputText>

					<h:panelGroup>
						<h:outputText value="#{lbl['destination.label']}" /> : 
						</h:panelGroup>

					<h:inputText id="label" tabindex="2"
						value="#{destinationManaged.currentDestination.label}"
						maxlength="25" size="30" required="true"
						requiredMessage="#{err['destination.label.required']}" />

					<h:panelGroup>
						<h:outputText value="#{lbl['destination.color']}" /> : 
						</h:panelGroup>

					<h:inputText id="hexColor" readonly="false"
						onclick="showColorPicker(this,this);"
						requiredMessage="#{err['destination.color.required']}"
						style="background:#{destinationManaged.currentDestination.hexColor}"
						value="#{destinationManaged.currentDestination.hexColor}"
						maxlength="7" size="30" required="true" tabindex="3" />

					<h:panelGroup>
						<h:outputText value="#{lbl['destination.listextid']}" /> : 
						</h:panelGroup>

					<h:inputText id="listExtId"
						value="#{destinationManaged.currentDestination.lstExtId}"
						maxlength="255" size="60" />

					<h:panelGroup>
						<h:outputText value="#{lbl['common.comment']}" /> : 
						</h:panelGroup>

					<h:inputTextarea id="comment" tabindex="4"
						value="#{destinationManaged.currentDestination.comment}" cols="60"
						rows="10" />
				</h:panelGrid>

				<h:panelGrid columns="2" columnClasses="_left, _right" width="100%">
					<a4j:commandButton value="#{lbl['common.button.cancel']}"
						id="destination_b_cancel_edit" tabindex="7"
						onclick="#{rich:component('edit_popup')}.hide();closeColorPicker(); return false;" />

					<a4j:commandButton value="#{lbl['common.button.validate']}"
						render="destinations_panel_container" execute="edit_panel"
						id="destination_b_edit" action="#{destinationManaged.edit}"
						tabindex="8" onclick="closeColorPicker();"
						oncomplete="if ('#{destinationManaged.maximumSeverity}'=='INFO'){#{rich:component('edit_popup')}.hide();}" />
				</h:panelGrid>
			</rich:popupPanel>
		</h:form>
	</ui:define>
</ui:composition>
</html>